<template>
  <div class="login-container">
    <!-- 右上角操作栏 -->
    <div class="action-bar">
      <el-tooltip :content="t('login.themeToggle')" placement="bottom">
        <CommonWrapper><DarkModeSwitch /></CommonWrapper>
      </el-tooltip>
      <el-tooltip :content="t('login.languageToggle')" placement="bottom">
        <CommonWrapper><LangSelect size="text-20px" /></CommonWrapper>
      </el-tooltip>
    </div>

    <!-- 登录主体（已靠右） -->
    <div class="page-main">
      <div
        class="login-box p-4xl border-rd-10px shadow-[var(--el-box-shadow-light)] backdrop-blur-3px"
      >
        <div class="flex flex-col items-center w-full">
          <!-- logo -->
          <el-image :src="logo" style="width: 84px" />

          <!-- 标题 -->
          <h2 class="my-3">
            <el-badge :value="`v ${defaultSettings.version}`" type="success">
              {{ defaultSettings.title }}
            </el-badge>
          </h2>

          <!-- 动态表单 -->
          <transition name="fade-slide" mode="out-in">
            <component :is="formComponents[component]" v-model="component" class="w-90%" />
          </transition>
        </div>
      </div>

      <!-- 版权 -->
    </div>
    <el-text size="small" class="copyright">
      Copyright © 2021 – 2025 youlai.tech All Rights Reserved.
      <a href="http://beian.miit.gov.cn/" target="_blank">皖ICP备20006496号-2</a>
    </el-text>
  </div>
</template>

<script setup lang="ts">
import logo from "@/assets/logo.png";
import { defaultSettings } from "@/settings";
import CommonWrapper from "@/components/CommonWrapper/index.vue";
import DarkModeSwitch from "@/components/DarkModeSwitch/index.vue";

type LayoutMap = "login" | "register" | "resetPwd";
const t = useI18n().t;
const component = ref<LayoutMap>("login");
const formComponents = {
  login: defineAsyncComponent(() => import("./components/Login.vue")),
  register: defineAsyncComponent(() => import("./components/Register.vue")),
  resetPwd: defineAsyncComponent(() => import("./components/ResetPwd.vue")),
};
</script>

<style lang="scss" scoped>
.login-container {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  width: 100%;
  height: 90%;
  padding-right: clamp(1rem, 4vw, 4rem);
  margin-top: 20px;

  @media (max-width: 640px) {
    justify-content: center;
    padding: 0;
  }
}

/* 背景层 */
.login-container::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  background: url("@/assets/images/login-bg.svg") center/cover;
}

.page-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;

  @media (max-width: 640px) {
    align-items: center;
  }
}

.login-box {
  width: clamp(280px, 32vw, 400px);
  backdrop-filter: blur(3px);
  transform: scale(0.9);
}

.copyright {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0.5rem 0;
  text-align: center;

  @media (max-width: 640px) {
    right: 0;
    left: 0;
    text-align: center;
  }
}

.action-bar {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 10;
  display: flex;
  gap: 8px;
  font-size: 1.125rem;

  @media (max-width: 480px) {
    right: auto;
    left: 10px;
  }
  @media (min-width: 640px) {
    top: 40px;
    right: 40px;
  }
}

.fade-slide-enter-active,
.fade-slide-leave-active {
  transition: all 0.3s;
}
.fade-slide-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}
.fade-slide-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>
